<template>
  <div class="TagManage">
    <el-card class="box-card">
      <p class="text">标签作为域名和IP直接匹配的中间媒介</p>
      <p class="text">域名所打标签和节点池所打标签，每个类型标签取交集，如果都有交集则匹配，否则不匹配</p>
    </el-card>
    <el-form ref="form3" :model="poolSetData" label-width="90px">
      <el-form-item label="请选择标签">
        <el-button type="text" @click="jumpTag">管理标签<i class="el-icon-right"></i></el-button>
      </el-form-item>
      <el-form-item v-for="(item, i) in tagList" :key="i" :label="item.labelTypeName" prop="minNumber">
        <span v-for="(tag, ii) in item.poolLabelVoList" :key="ii" class="tag" :class="{ active: tag.checkedState == 1 }"
          @click="choseTag(tag, i, ii)">{{
      tag.labelName }}</span>
      </el-form-item>
      <el-form-item>
        <div class="subBtn2">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { selectLabelByPoolId, addPoolTag } from "@/api/system/pool";
export default {
  name: "TagManage",
  props: {
    id: { type: Number, default: null },
    fromData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      tagList: [],
      poolSetData: {
        nodePoolId: '',
        labelIdList: []
      },
    }
  },
  computed: {
  },
  filters: {
  },
  created() {
    this.poolSetData.nodePoolId = this.fromData.id;
    this.getList();
  },
  methods: {
    /** 查询IP智能调度列表 */
    getList() {
      this.loading = true;
      selectLabelByPoolId({ poolId: this.fromData.id }).then(response => {
        this.tagList = response.data || [];
        this.loading = false;
      });
    },
    submitForm() {
      this.poolSetData.labelIdList = '';
      let list = [];
      this.tagList.forEach(item => {
        if (item.poolLabelVoList && item.poolLabelVoList.length) {
          item.poolLabelVoList.forEach(obj => {
            if (obj.checkedState == 1) {
              list.push(obj.labelId);
            }
          })
        }
      });
      this.poolSetData.labelIdList = list;
      addPoolTag(this.poolSetData, { 'Content-Type': 'application/json' }).then(response => {
        this.$modal.msgSuccess("设置成功");
        this.cancel();
      });
    },
    cancel() {
      this.$emit('handlerTag', 0)
    },
    choseTag(tag, i, ii) {
      if (tag.checkedState == 1) {
        this.tagList[i].poolLabelVoList[ii].checkedState = 0
      } else {
        this.tagList[i].poolLabelVoList[ii].checkedState = 1
      }
    },
    jumpTag() {
      this.$emit('handlerTag', 1)
      // this.$router.push("/common/label");
    }
  }
};
</script>
<style scoped lang="scss">
.tag {
  padding: 5px 15px;
  border: 1px solid #d3d4d6;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  background-color: #f4f4f5;
  color: #909399;
  margin-right: 4px;
  cursor: pointer;

  &.active {
    border: 1px solid #409eff;
    background-color: #409eff;
    color: #FFFFFF;
  }
}

.subBtn {
  text-align: center;
}

.subBtn2 {
  text-align: right;
}

.box-card {
  margin-bottom: 10px;

  .el-card__body {
    padding: 8px 10px;

    .text {
      font-size: 12px;
      margin: 5px 0;
    }
  }
}
</style>
